import React, { PureComponent } from 'react';
import { WhiteSpace, ListView, PullToRefresh } from 'antd-mobile';
import DataPreview from './dataPreview';
import styles from './style.less';

class ReportList extends PureComponent {

  ds;

  constructor(props) {
    super(props);
    this.ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => `${r1.ID}_${r1.blockId}` !== `${r2.ID}_${r2.blockId}`,
    });
    this.state = {
      refreshing: false,
    };
  }

  onRefresh = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'home/getReportData' });
  };

  render() {
    const { data, reportDatas, searchValue, isActive, refreshing } = this.props;
    const BlockRelateReport = data.BlockRelateReport || '[]';
    const ReportArr = JSON.parse(BlockRelateReport);
    const reportList = [];
    for (const e of ReportArr) {
      const rdata = reportDatas[e.reporterId];
      if (e.reporterId && rdata && rdata.ID) {
        const ReprotName = rdata.ReprotName || '';
        // 如果 searchValue 就以 searchValue来筛选
        if ((searchValue && ReprotName.includes(searchValue)) || !searchValue) {
 
          reportList.push({ ...e, ...rdata });
        }
      }
    }
    const dataSource = this.ds.cloneWithRows(reportList);
    return (
      <div className={styles['report-list']}>
        <WhiteSpace size="xs" />
        <ListView
          key={reportList.length}
          className={styles['scroll-list']}
          dataSource={dataSource}
          renderRow={rowData => (
            <DataPreview key={`${rowData.ID}_${rowData.blockId}`} data={rowData} />
          )}
          pullToRefresh={
            <PullToRefresh cancelable='true' refreshing={isActive && refreshing} onRefresh={this.onRefresh} />
          }
        />
      </div>
    );
  }
}

export default ReportList;
